<template>
  <div class='container'>
    <el-card class='card-container'>
      <el-form ref="form" :model="searchForm" :inline="true" >
        <el-row>
          <el-col :span="12">
            <el-form-item label="目录名称" style="margin-left: 16px;">
              <el-input v-model="searchForm.directoryName" style="margin-right: 40px;width:200px"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="searchForm.state" placeholder="请选择" style="margin-right: 16px;width:200px">
                <el-option  v-for="item in directoryStates" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
              <el-button @click="clearStatus">清除</el-button>
              <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="text-align: right">
            <el-button type="success" @click="onChangeNewView"><i class="el-icon-edit"></i>新增目录</el-button>
          </el-col>
        </el-row>
      </el-form>
      <div class="counts"><i class="el-icon-info"></i> 数据一共 {{ directoryList.counts }} 条</div>
      <!--      表格-->
      <my-table
        :table-props="{
            data: directoryList.items,
            border: false
          }"
        :columns="[
            { label: '序号', prop: 'index', width: 50, align: 'left' },
            { label: '所属学科', prop: 'subjectName', align: 'left' },
            { label: '目录名称', prop: 'directoryName', align: 'left' },
            { label: '创建者', prop: 'username', align: 'left' },
            { label: '创建日期', slotName: 'addDate', align: 'left' },
            { label: '面试题数量', prop: 'totals', align: 'left' },
            { label: '状态', slotName: 'state', align: 'left' },
            { label: '操作', slotName: 'operators', width: 200, align: 'left', }
          ]"
        :pagination-props="{
            pageSizes: [20, 30, 50, 100],
            layout: 'total, ->, prev, pager, next, sizes, jumper',
            total: directoryList.counts
          }"
        :pagination-events="events"
      >
        <template v-slot:state="scope">
          <div>{{ scope.row.state == 0 ? '已禁用' : '已启用' }}</div>
        </template>
        <template v-slot:addDate="scope">
          <div>{{ getTimeString(scope.row.addDate)}}</div>
        </template>
        <template v-slot:question="scope">
          <div v-html="scope.row.question"></div>
        </template>
        <template v-slot:operators="scope">
          <el-link class="link" type="primary" @click="onStateClick(scope.row)" :underline="false">
            {{ scope.row.state == 0 ? '启用' : '禁用' }}
          </el-link>
          <el-link class="link" type="primary" @click="onUpdateClick(scope.row)" :underline="false"
                   :disabled="scope.row.state == 1 ? 'disabled' : null">修改</el-link>
          <el-link class="link" type="primary" @click="onDelClick(scope.row)" :underline="false"
                   :disabled="scope.row.state == 1 ? 'disabled' : null">删除</el-link>
        </template>
      </my-table>
    </el-card>
    <!--    新增弹窗-->
    <el-dialog
      :title="editView.title"
      :visible.sync="editView.visible"
      @close="onViewClose"
      width="20%"
    >
      <el-form ref="form" :model="addSubjectForm" label-width="80px">
        <el-form-item label="学科名称" required>
          <el-select v-model="addSubjectForm.subjectID" placeholder="请选择" style="width:100%">
            <el-option v-for="item in subjectList.data" :key="item.id" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" required>
          <el-input v-model="addSubjectForm.directoryName" placeholder="请输入目录名称"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="onViewClose">取消</el-button>
        <el-button @click="onViewOk" type="primary">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as directoryApi from '@/api/hmmm/directorys'
import { questionModule } from '@/store/utils/addUtils'
import { mapState, mapActions } from 'vuex'
import { delModule } from '@/store/utils/delUtils'
import { status } from '@/api/hmmm/constants'
import { getTimeString } from '@/utils/time'

export default {
  name: 'Sbject',
  data () {
    return {
      getTimeString,
      currentPage: {
        page: 1,
        pagesize: 10
      },
      events: {
        'current-change': this.onCurrentPageChange
      },
      directoryStates: status,
      searchForm: {
        directoryName: '',
        state: ''
      },
      addSubjectForm: {
        directoryName: '',
        subjectID: ''
      },
      // 新增学科弹窗
      subjectVisible: false,
      editView: {
        visible: false,
        title: ''
      }
    }
  },
  computed: {
    ...mapState('directorys', ['directoryList']),
    ...mapState('subjects', ['subjectList'])
  },
  methods: {
    ...mapActions('directorys', ['updateDirectoryList']),
    ...mapActions('subjects', ['updateSubjectList']),
    onCurrentPageChange (currentPage) {
      this.currentPage.page = currentPage
      this.updateDirectoryList(this.currentPage)
    },
    // 清除
    clearStatus () {
      this.searchForm = {
        directoryName: '',
        state: ''
      }
    },
    // 搜索
    onSearch (data) {
      //  请求传参
      this.updateDirectoryList({
        ...this.currentPage,
        ...this.searchForm
      })
    },
    // 点击新增 弹窗
    onChangeNewView () {
      this.editView.visible = true
      this.editView.title = '新增目录'
    },
    // 点击修改
    onUpdateClick (data) {
      this.addSubjectForm = {
        directoryName: data.directoryName,
        id: data.id,
        subjectID: data.subjectID
      }
      this.editView.title = '修改目录'
      this.editView.visible = true
    },
    // 关闭弹窗
    onViewClose () {
      this.editView.visible = false
      this.addSubjectForm = {
        directoryName: '',
        subjectID: ''
      }
    },
    // 确认新增、修改
    async onViewOk () {
      if (this.editView.title === '新增目录') {
        await questionModule(directoryApi.add, this.addSubjectForm, '新增')
      } else {
        await questionModule(directoryApi.update, this.addSubjectForm, '修改')
      }
      this.onViewClose()
      this.updateDirectoryList(this.currentPage)
    },

    // 启用
    async onStateClick (data) {
      await directoryApi.changeState({
        id: data.id,
        state: data.state == 1 ? 0 : 1
      })
      this.updateDirectoryList(this.currentPage)
    },
    // 删除
    async onDelClick (data) {
      await delModule(directoryApi.remove, '目录', data)
      this.updateDirectoryList(this.currentPage)
    }
  },
  created () {
    this.updateDirectoryList(this.currentPage)
    this.updateSubjectList()
  }
}
</script>

<style scoped lang='scss'>
.link{
  margin-right: 16px;
}
.counts {
  padding: 8px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  background-color: #f4f4f5;
  border-radius: 6px;
  color: #aaa;
}
.dialog-footer {
  display: flex;
  justify-content: right;
  margin-top: 40px;
}
</style>
